<html xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui">


<ui:composition template="/layout/template.xhtml">

	<ui:define name="head">
		<!--  this is a more complex technique which changes styleclass on the id="listPanel" area without reselecting the list on the server -->
		<!--  This could be achieved by including the :listPanel in the refresh zones as ts is done in levels.xhtml page -->
		<!-- 	but here update is only focused on editPanel : update=":editPanel" -->
		<script type="text/javascript">
		function toEditMode(){
			/* les buttons en editStyle doivent apparaitre en editMode*/
			$('.editStyle').attr('aria-disabled', 'false').removeClass('ui-state-disabled  ui-state-focus  ui-state-hover').removeAttr('disabled');
			/* les buttons en notEditStyle doivent DISapparaitre en editMode*/
			$('.notEditStyle').attr('aria-disabled', 'true').addClass('ui-state-disabled').removeClass('ui-state-focus ui-state-hover').attr('disabled',true);
			return false;
		}
		function toNotEditMode(){
			/* les buttons en notEditStyle doivent apparaitre en notEditMode*/
			$('.notEditStyle').attr('aria-disabled', 'false').removeClass('ui-state-disabled  ui-state-focus  ui-state-hover').removeAttr('disabled');
			/* les buttons en editStyle doivent DISapparaitre en notEditMode*/
			$('.editStyle').attr('aria-disabled', 'true').addClass('ui-state-disabled').removeClass('ui-state-focus  ui-state-hover').attr('disabled',true); 
			return false;
		}
		</script>
	</ui:define>
	<ui:define name="title">
		<h:outputText value="#{appMsg['title.list.teams']}" />
	</ui:define>

	<ui:define name="content">

		<h:panelGrid id="listPanel">
			<h:form id="form" style="width : 30em">
				<p:dataTable id="dataTable" value="#{teamsHome.teams}" var="p">
					<f:facet name="header">
						<p:commandButton value="cancel edit" update=":editPanel" actionListener="#{teamsView.cancelEditTeam()}"
							styleClass="editStyle" disabled="#{!teamsView.editMode}" oncomplete="toNotEditMode();" />
						<p:commandButton value="new" update=":editPanel" actionListener="#{teamsView.editNewTeam()}"
							styleClass="notEditStyle" oncomplete="toEditMode();" ajax="true" />
					</f:facet>
					<p:column>
						<p:commandButton value="edit" update=":editPanel" styleClass="notEditStyle"
							actionListener="#{teamsView.setEditTeamById(p.id)}" onstart="toEditMode();">
						</p:commandButton>
					</p:column>
					<p:column sortBy="#{p.name}">
						<f:facet name="header">
							<h:outputText value="#{appMsg['team.name']}" />
						</f:facet>
						<h:outputText value="#{p.name}" />
					</p:column>
				</p:dataTable>
			</h:form>
		</h:panelGrid>

		<h:panelGrid columns="2">
			<p:panel id="editPanel" styleClass="peel-no-border">
				<p:panel rendered="#{teamsView.editMode}"
					header="#{teamHome.team.id ne null ? appMsg['title.update.team'] : appMsg['title.create.team']}">
					<h:form id="formTeam">
						<h:panelGrid>
							<h:panelGrid columns="2">
								<h:outputLabel value="#{appMsg['team.name']}" />
								<p:inputText id="lastname" label="#{appMsg['team.name']}" value="#{teamHome.team.name}"
									required="true">
								</p:inputText>
							</h:panelGrid>
							<h:panelGroup>
								<p:commandButton id="merge" actionListener="#{teamsView.updateTeam()}" update=":editPanel :listPanel"
									value="#{teamHome.team.id ne null ? appMsg['update'] : appMsg['create']}" />
								<p:spacer width="5px" />
								<p:commandButton id="delete" actionListener="#{teamsView.deleteTeam()}" value="#{appMsg['delete']}"
									rendered="#{teamHome.team.id ne null}" process="@this" partialSubmit="true"
									update=":editPanel :listPanel"
									onclick="return confirm('#{appMsg['confirm.delete']} #{appMsg['team']}');" />
								<p:spacer width="5px" />
								<p:commandButton id="cancel" process="@this" value="#{appMsg['cancel']}" update=":editPanel"
									actionListener="#{teamsView.cancelEditTeam()}" oncomplete="toNotEditMode();" />
							</h:panelGroup>
						</h:panelGrid>
					</h:form>
				</p:panel>
			</p:panel>
		</h:panelGrid>

	</ui:define>
</ui:composition>
</html>
